<template>
  <el-dialog :visible.sync="visible" :before-close="hanldeClose" :close-on-click-modal="false">
    <el-form ref="dataForm" :model="form" label-width="80px" label-position="left">
      <template v-for="column in columns">
        <template v-if="column.form">
          <!-- Other -->
          <el-form-item v-if="isShowFormItem(column)" :key="column.key" :label="column.label" :rules="column.form.rule">
            <el-input v-model="form[column.key]" />
          </el-form-item>
          <!-- Radio -->
          <el-form-item v-else-if="isShowFormItem(column, 'radio')" :key="column.key" :label="column.label" :rules="column.form.rule">
            <Radio :value.sync="form[column.key]" :data="column.form.radio" />
          </el-form-item>
          <!-- Select -->
          <el-form-item v-else-if="isShowFormItem(column, 'select')" :key="column.key" :label="column.label" :rules="column.form.rule">
            <Select :value.sync="form[column.key]" :select="column.form.select" />
          </el-form-item>
          <!-- Number -->
          <el-form-item v-else-if="isShowFormItem(column, 'number')" :key="column.key" :label="column.label" :rules="column.form.rule">
            <el-input type="number" v-model="form[column.key]" />
          </el-form-item>
          <!-- Img Croper -->
          <el-form-item v-else-if="isShowFormItem(column, 'image')" :key="column.key" :rules="column.form.rule">
            <ImgCropper :url.sync="form[column.key]" />
          </el-form-item>
          <!-- Date Picker -->
          <el-form-item v-else-if="isShowFormItem(column, 'date-picker')" :key="column.key" :label="column.label" :rules="column.form.rule">
            <el-date-picker v-model="form[column.key]" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" />
          </el-form-item>
        </template>
        <!-- Other -->
        <el-form-item v-else-if="isShowFormItem(column)" :key="column.key" :label="column.label">
          <el-input v-model="form[column.key]" />
        </el-form-item>
      </template>
      <el-form-item>
        <div style="text-align: right">
          <el-button @click="handleResetField">重置</el-button>
          <el-button type="primary" @click="submit">确认</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script lang="ts" src="./data-model.ts" />

<style lang="less" scoped>
.el-form {
  & /deep/ .el-form-item__label {
    font-weight: bolder;
  }
}
</style>

